<template>
	<view class="container">
		<view class="nav" :style="'height:'+TitleHeight+'px;'">
			<view class="menu" :style="'opacity:'+Opacity"></view>
			<view class="back1" :style="'bottom:'+(TitleBottom+3)+'px'" v-if="scene==0" @click="Back"><image src="/static/sort1.png" /></view>
			<view class="back2" :style="'bottom:'+(TitleBottom+3)+'px'" v-if="scene>0" @click="Back"><image src="/static/home1.png" /></view>
			<view class="title" :style="'bottom:'+TitleBottom+'px'">用户详情</view>
		</view>
		<template v-if="Code==460 || Code==480">
			<view class="forbid">
				<view class="img"><image src="https://yuehuiba.qiyedaishu.com/img/warn.png"/></view>
				<view class="tip">为保护用户隐私，真诚相亲注册认证后，可解锁查看我的个人资料。</view>
				<view class="btn" @click="GoRegist">立即注册认证</view>
			</view>
		</template>
		<template v-if="Info.ID>0">
		<view class="panel">
		<view class="userinfo">
			<view class="headimg">
				<image :src="Tools.GetImg(Info.HeadImg,1000)" mode="aspectFill" />
				<view class="identify">
					<view class="icon" v-if="Info.IsRealName==1"><image src="https://yuehuiba.qiyedaishu.com/img/shiming.png"/></view>
					<view class="icon" v-if="Info.IsSchool==1"><image src="https://yuehuiba.qiyedaishu.com/img/xueli.png"/></view>
					<view class="icon" v-if="Info.IsCrime==1"><image src="https://yuehuiba.qiyedaishu.com/img/fanzui.png"/></view>
					<view class="icon" v-if="Info.IsMarriage==1"><image src="https://yuehuiba.qiyedaishu.com/img/hunyin.png"/></view>
				</view>
			</view>
			<view class="info">
				<view class="realname">{{Info.NickName}}</view>
				<view class="sex">
					<view class="icon"><image :src="'../../static/'+Info.Sex.ToSex()"/></view>
					<view class="age">{{Info.Age}}岁</view>
				</view>
				<view class="distance">距我{{Info.Distance}}</view>
			</view>
			<view class="brief">{{Info.WorkPlace}} • {{Info.Education}} • {{Info.WorkRole}} • {{Info.Stature}}cm</view>
		</view>
		<view class="square" v-if="Info.Signature!=''">
			<view class="title">签名</view>
			<view class="context">{{Info.Signature}}</view>
		</view>
		<view class="square">
			<view class="title">详细资料</view>
			<view class="context">
				<view class="line"><view class="name">年龄</view><view class="value">{{Info.Age}} 岁</view></view>
				<view class="line"><view class="name">身高</view><view class="value">{{Info.Stature}} cm</view></view>
				<view class="line"><view class="name">体重</view><view class="value">{{Info.Weight}} kg</view></view>
				<view class="line"><view class="name">婚姻状况</view><view class="value">{{Info.Marriage.ToString()}}</view></view>
				<view class="line"><view class="name">家庭状况</view><view class="value">{{Info.Family.ToString()}}</view></view>
				<view class="line"><view class="name">现居地</view><view class="value">{{Info.WorkPlace.ToString()}}</view></view>
				<view class="line"><view class="name">出生地</view><view class="value">{{Info.BirthPlace.ToString()}}</view></view>				
				<view class="line"><view class="name">年收入</view><view class="value">{{Info.Income.ToString()}}</view></view>
				<view class="line"><view class="name">学历</view><view class="value">{{Info.Education.ToString()}}</view></view>
				<view class="line"><view class="name">职业</view><view class="value">{{Info.WorkRole.ToString()}}</view></view>
				<view class="line"><view class="name">专业</view><view class="value">{{Info.Profession.ToString()}}</view></view>
				<view class="line"><view class="name">行业</view><view class="value">{{Info.Industry.ToString()}}</view></view>
				<view class="line"><view class="name">职业属性</view><view class="value">{{Info.Vocation.ToString()}}</view></view>
				<view class="line"><view class="name">是否有房</view><view class="value">{{Info.House.ToString()}}</view></view>
				<view class="line"><view class="name">是否有车</view><view class="value">{{Info.Car.ToString()}}</view></view>				
				<view class="line"><view class="name">兄弟姐妹几人</view><view class="value">{{Info.Brother.ToString()}}</view></view>
				<view class="line"><view class="name">父母是否有退休金</view><view class="value">{{Info.Pension.ToString()}}</view></view>				
			</view>
		</view>
		<view class="square">
			<view class="title">兴趣爱好</view>
			<view class="context">
				<view class="interest" v-for="(item,index) in InterestList" :style="'background-color:'+ColorList[index%10]">{{item}}</view>
				<template v-if="InterestList.length==0">
					<view class="nodata"></view>
					<view class="loadmore">你尚未填写兴趣爱好</view>
				</template>
			</view>
		</view>
		<view class="square">
			<view class="title">生活照</view>
			<view class="context">
				<view class="img" v-for="(img,index) in ImgList" @click="PrevImg(ImgList, index)"><image :src="Tools.GetImg(img,200)" mode="aspectFill"/></view>
				<template v-if="ImgList.length==0">
					<view class="nodata"></view>
					<view class="loadmore">该用户未上传生活照</view>
				</template>
			</view>
		</view>
		<view class="square">
			<view class="title">择偶条件</view>
			<view class="context">
				<view class="line"><view class="name">年龄</view><view class="value">{{Info.OAge}} 岁</view></view>
				<view class="line"><view class="name">身高</view><view class="value">{{Info.OStature}} cm</view></view>
				<view class="line"><view class="name">学历</view><view class="value">{{Info.OEducation}}</view></view>
				<view class="line"><view class="name">工作</view><view class="value">{{Info.OWorkRole}}</view></view>
				<view class="line"><view class="name">婚姻状况</view><view class="value">{{Info.OMarriage}}</view></view>
				<view class="line"><view class="name">年收入</view><view class="value">{{Info.OIncome}}</view></view>
				<view class="line"><view class="name">是否有房</view><view class="value">{{Info.OHouse}}</view></view>
				<view class="line"><view class="name">是否有车</view><view class="value">{{Info.OCar}}</view></view>
				<view class="line"><view class="name">工作地区</view><view class="value">{{Info.OWorkPlace}}</view></view>
				<view class="line"><view class="name">父母是否有退休金</view><view class="value">{{Info.OPension}}</view></view>
			</view>
		</view>
		<view class="square">
			<view class="title">对{{Info.Sex=='男'?'他':'她'}}的评价</view>
			<view class="context">
				<view class="list border-b" v-for="evaluate in EvaluateList">
					<view class="headimg" @click="UserInfo(evaluate.UserID,evaluate.Role)"><image :src="Tools.GetImg(evaluate.HeadImg,200)" mode="aspectFill"/></view>
					<view class="right">
						<view class="nickname">{{evaluate.NickName}}</view>
						<view class="rowline"><view class="star"><htz-rate :value="evaluate.Score" :size="30" :gutter="10" readonly="true" @change="UserScoreChange"></htz-rate></view><view class="from">来自：{{evaluate.Role==0?"用户":"红娘"}}</view></view>
						<view class="text">{{evaluate.Context}}</view>
					</view>
				</view>
				<template v-if="EvaluateList.length==0">
					<view class="nodata"></view>
					<view class="loadmore">还没有任何评价</view>
				</template>
			</view>
		</view>
		<view class="tools" :style="Role==1 ? 'width:250rpx; left:250rpx;':''">
			<template v-if="Role!=1">
				<template v-if="Info.IsHanded==0">
					<view class="btn1" @click="YueJian(0)" v-if="Info.IsApply==0">约见</view>
					<view class="btn1 cancel" @click="Cancel" v-else>取消约见</view>
				</template>
				<template v-else>
					<view class="btn3" @click="HadHanded">已牵手</view>
				</template>
			</template>
			<view class="btn2" @click="Store(1)" v-if="Info.IsStore==0">关注</view>
			<view class="btn2 cancel" @click="Store(0)" v-else>取消关注</view>
		</view>
		</view>
		</template>
		<view class="dialog" v-if="Show">
			<view class="meng"></view>
			<view class="alert">
				<view class="title">平台提示</view>
				<view class="tip" v-html="HeNoIdentifyTip"></view>
				<view class="btns">
					<view class="btn1" @click="CloseDialog">放弃约见</view>
					<view class="btn2" @click="YueJian(1)">仍要约见</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Info.NickName,
		      path: "pages/yuehui/yuehuiinfo?scene="+UserID+"&ParentID="+UserID+"&ID="+this.ID //这是一个路径
		    }
		},
		data() {
			return {
				Show:false,
				Code:0,
				scene:0,
				ID:0,
				Lat:0,
				Lng:0,
				Role:0,
				Opacity:0,
				TitleHeight: 0,
				TitleBottom: 0,
				Info:{ID:0},
				ImgList:[],
				IsSameSex:0,
				IsSameCity: 0,
				IsIdentify: 0,
				MyState:0,
				InterestList:[],
				EvaluateList:[],
				MeNoIdentifyTip:'',
				HeNoIdentifyTip:'',
				ColorList:["#4682e9","#f99a4b","#ea59aa","#e76a39","#776ae0","#3b74da","#63bd77","#de412a","#367b9b","#8a2cc4"]
			};
		},
		onPageScroll(res) {
			this.Opacity=res.scrollTop/100;
		},
		onShow(){
			uni.$once("FinishIdentify",()=>{
				this.Find_UserInfo();
			});
			uni.$once("Success",()=>{
				this.Find_UserInfo();
			});
		},
		onLoad(options) {
			this.ID=options.ID;
			this.scene=options.scene ? options.scene : 0;
			this.Util.SetParam(options);
			this.Role = uni.getStorageSync("Role");
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			    this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			    this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
				this.Find_UserInfo();
			  },
			  fail: res=>{
				  this.Find_UserInfo();
			  }
			});
			
			var menu = this.Util.GetMenuHeight();
			this.TitleHeight = menu.height;
			this.TitleBottom = menu.bottom;
		},
		methods:{
			Back(){
				if(this.scene){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack();
				}
			},
			CloseDialog(){
				this.Util.AddPushCount();
				this.Show=false;
			},
			GoRegist(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			ToShare(){
				this.Util.Loading("请稍候...");
				setTimeout(()=>{
					this.Util.HideLoading();
				},1000);
			},
			HadHanded(){
				this.Util.Alert('该'+this.Info.Sex+"士"+"已牵手成功，请选择其他约会对象吧");
			},
			YueJian(Flag){
				this.Util.AddPushCount();
				if(!uni.getStorageSync("Token")){
					this.Util.Confirm("你尚未登录，你确定现在登录吗？",()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					});
					return;
				}
				if(this.MyState==0){
					this.Util.Confirm("你是新注册用户，请完善资料并认证后再约见",()=>{
						uni.navigateTo({
							url:'/subpackages/login/userinfo'
						})
					});
					return;
				}
				if(this.MyState==1){
					this.Util.Alert("你的资料还在审核中，请等待通过后再约见");
					return;
				}
				if(this.MyState==3){
					this.Util.Confirm("你的资料审核失败，原因："+ this.Info.Reason+"。你确定现在就修改吗？",()=>{
						uni.navigateTo({
							url:'/subpackages/login/userinfo'
						})
					});
					return;
				}
				if(this.IsSameSex==1){
					this.Util.Alert("你不能约见同性");
					return;
				}
				if(this.IsIdentify==0){
					this.Util.Confirm(this.MeNoIdentifyTip,()=>{
						uni.navigateTo({
							url:'/pages/index/identify'
						})
					});
					return;
				}				
				if(this.IsSameCity==0){
					this.Util.Confirm("你们不在一个城市，是否继续约见", item=>{
						this.SaveOrder();
					});					
				}else{
					if(this.Info.IsIdentify==0 && Flag==0){
						this.Show=true;
						return;
					}
					if(this.Info.IsIdentify==0 && Flag==1){
						this.Show=false;
						this.SaveOrder();
					}
					if(this.Info.IsIdentify==1)
					{
						this.Util.Confirm("您确定要约见该"+(this.Info.Sex=="男"?"男士":"女士")+"吗？",item=>{
							this.SaveOrder();
						});
					}
				}
			},
			SaveOrder(){
				var data = {};
				data.Act="Save_Order";
				data.ToUserID=this.ID;
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						this.$set(this.Info,"IsApply",1);
						this.Util.Toast(json.Msg, res=>{
							this.Util.ToSuccess("", json.Msg,"返回",1);
						});
					}else{
						this.Util.Alert(json.Msg,()=>{
							if(json.Code==410){
								uni.navigateTo({
									url:'/pages/my/mymatcher'
								})
							}
						});
					}
				});
			},
			Cancel(){
				this.Util.AddPushCount();
				this.Util.Confirm("您确定要取消约见该"+(this.Info.Sex=="男"?"男士":"女士")+"吗？",item=>{
					var data = {};
					data.Act="Cancel_Order";
					data.ToUserID=this.ID;
					this.Util.Loading("请稍候...");
					this.Util.Post(data, json=>{
						this.Util.HideLoading();
						if(json.State){
							this.$set(this.Info,"IsApply",0);
							this.Util.Toast(json.Msg);
						}else{
							this.Util.Alert(json.Msg);
						}
					});
				});
			},
			Store(IsStore){
				this.Util.AddPushCount();
				this.Util.Confirm("您确定要"+(IsStore==1?"关注":"取消关注")+"该"+(this.Info.Sex=="男"?"男士":"女士")+"吗？",item=>{
					var data = {};
					data.Act="Save_Store";
					data.ToUserID=this.ID;
					this.Util.Loading("请稍候...");
					this.Util.Post(data, json=>{
						this.Util.HideLoading();
						if(json.State){
							this.Util.Toast(json.Msg, res=>{
								this.$set(this.Info, "IsStore", IsStore);
							});
						}else{
							this.Util.Alert(json.Msg);
						}
					});
				});
			},
			PrevImg(ImgList, Index){
				uni.previewImage({
				  current: ImgList[Index], // 当前显示图片的http链接
				  urls: ImgList // 需要预览的图片http链接列表
				});
			},
			Copy(Text){
				uni.setClipboardData({
				    data: Text,
				    success: json=>{
				        this.Util.Toast("已复制到剪贴板");
				    }
				});
			},
			UserInfo(ID,Role){
				if(Role==0){
					uni.navigateTo({
						url:'/pages/yuehui/yuehuiinfo?ID='+ID
					})
				}else{
					uni.navigateTo({
						url:'/pages/matcher/matcherinfo?ID='+ID
					})
				}
			},
			Find_UserInfo(){
				var data = {};
				data.ID=this.ID;
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				data.Act="Find_UserInfo";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();					
					if(json.State){
						this.Info = json.Data.Info;						
						this.IsSameSex = json.Data.IsSameSex;
						this.IsSameCity = json.Data.IsSameCity;
						this.IsIdentify = json.Data.IsIdentify;
						this.MyState = json.Data.MyState;
						this.ImgList=json.Data.Info.LifeImgs.ToList();
						this.InterestList=json.Data.Info.Interest.ToList(); 
						this.EvaluateList = json.Data.EvaluateList;
						this.MeNoIdentifyTip=json.Data.MeNoIdentifyTip;
						this.HeNoIdentifyTip=json.Data.HeNoIdentifyTip;
					}else{
						if(json.Code==460){
							this.Util.Confirm(json.Msg, ()=>{
								this.Util.navigateTo({
									url:"/pages/index/identify"
								});
							});
						}
						if(json.Code==480){
							this.Util.Alert(json.Msg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{width:100%; height:auto; padding-top:40rpx; padding-bottom: 200rpx; background-image: url(https://yuehuiba.qiyedaishu.com/img/bg5.png); background-repeat: no-repeat; background-size: 100%;
		.panel{padding-left:25rpx;}
		.back1{width:60rpx !important; height:60rpx !important; border-radius: 30rpx !important; padding-left:0rpx !important; background-color: #ffffff; opacity: 0.5; position:absolute; left:20rpx; z-index:99;
			image{width:34rpx; height: 34rpx; margin-top:14rpx; margin-left: 12rpx; transform: rotate(90deg);}
		}
		.back1:active{opacity: 0.6;}
		.back2{width:60rpx !important; height:60rpx !important; border-radius: 30rpx !important; padding-left:0rpx !important; background-color: #ffffff; opacity: 0.7; position:absolute; left:20rpx; z-index:99;
			image{width:40rpx; height: 40rpx; margin-top:11rpx; margin-left: 11rpx; transform: rotate(0deg);}
		}
		.back2:active{opacity: 0.8;}
		.userinfo{width:700rpx; height:auto; margin-top:140rpx; background-color: #ffffff; border-radius: 20rpx; position: relative;
			.headimg{width:700rpx; height:700rpx; position: relative; image{width:100%; height:100%; border-radius: 20rpx;}
				.identify{width:60rpx; height:auto; position:absolute; right:20rpx; bottom:20rpx;display: flex; flex-direction: column;
					.icon{width:60rpx; height:60rpx; margin-top:16rpx; image{width:60rpx; height:60rpx; border-radius: 16rpx;}}
				}	
			}
			.info{width:100%; height:90rpx; padding-left:30rpx; padding-right:30rpx ; padding-top:20rpx; 
				.realname{width:auto; height:50rpx; line-height: 50rpx; float:left; margin-top:5rpx; font-size:40rpx; font-weight: bold;}
				.sex{width:auto; height:50rpx; border-radius: 25rpx; float:left; padding-right: 20rpx; margin-left:10rpx; margin-top:5rpx; background-color: #e4e4e5; 
					.icon{float:left; width:auto; height:50rpx; line-height: 56rpx; padding-left:20rpx; image{width:30rpx; height:30rpx;}}
					.age{float:left; width:auto; height:50rpx; line-height: 50rpx; padding-left:10rpx; font-size:30rpx; color:#575757;}
				}
				.distance{width:auto; height: 50rpx; line-height: 50rpx; margin-top:5rpx; font-size:30rpx; float:right; color:#3d7cfb;}
			}
			.brief{width:100%; min-height:50rpx; line-height: 50rpx; padding-bottom: 20rpx; padding-left:30rpx; padding-right:30rpx ; font-size:32rpx; color:#696969;}
		}
		.square{width:700rpx; height:auto; margin-top:20rpx; padding:30rpx; background-color: #ffffff; border-radius: 20rpx; position: relative;
			.title{width:100%; height:70rpx; line-height: 50rpx; color:#000000; font-size:36rpx; font-weight: bold;}
			.context{width:100%; height:auto; color:#a4a4a4; font-size:32rpx; display: flex; flex-direction: row; flex-wrap: wrap;
				.line{width:100%; min-height:50rpx; display:flex; flex-direction: row; margin-bottom: 15rpx;
					.name{min-width:220rpx; height:50rpx; line-height: 40rpx; padding-right:20rpx; color:#000000;}
					.value{flex:1; min-height:50rpx; line-height: 40rpx; color:#a4a4a4;}
				}
				.interest{width:auto; height: 70rpx; line-height: 70rpx; margin-bottom: 10rpx; margin-right: 10rpx; padding-left:20rpx; padding-right:20rpx;  background-color: #c94c36; color:#ffffff; border-radius: 10rpx; text-align: center;}
				.img{width:200rpx; height:200rpx; position: relative; margin-left:20rpx; margin-bottom:20rpx; border-radius: 10rpx;
					image{width:100%; height: 100%; border-radius: 10rpx;}
				}
				.img:nth-child(3n-2){margin-left:0rpx;}
				
				.list{width:100%; height:auto; padding-top:20rpx; padding-bottom: 15rpx; display: flex; flex-direction: row;
					.headimg{width:80rpx; height:80rpx; margin-top:0rpx; image{width:100%;height:100%; border-radius: 10rpx;}}
					.right{flex:1; padding-left:20rpx;
						.nickname{width:100%; height:30rpx; line-height: 30rpx; color:#000000; font-size:32rpx;}
						.rowline{width:100%; height:50rpx; display: flex; flex-direction: row;
							.star{width:200rpx; height:50rpx; padding-top:10rpx;}
							.from{flex:1; height: 50rpx; line-height: 50rpx; color:#757cfe; font-size:30rpx; text-align: right;}
						}
						.text{width:100%; height:auto; color:#575757; font-size:30rpx;}
					}
				}
			}
		}
		.tools{width:550rpx; position:fixed; left:100rpx; bottom:50rpx; display:flex; flex-direction: row; justify-content: space-between;
			.btn1{width:250rpx; height:90rpx; line-height: 90rpx; font-size:32rpx; background-color:#fe3163; border-radius: 45rpx; padding-left:120rpx; color:#ffffff; background-image: url(/static/qianshou.png); background-size: 50rpx; background-repeat: no-repeat; background-position: 60rpx center;}
			.btn2{width:250rpx; height:90rpx; line-height: 90rpx; font-size:32rpx; background-color:#757cfe; border-radius: 45rpx; padding-left:120rpx; color:#ffffff; background-image: url(/static/store1.png); background-size: 50rpx; background-repeat: no-repeat; background-position: 60rpx center;}
			.btn3{width:250rpx; height:90rpx; line-height: 90rpx; font-size:32rpx; background-color:#00bc6d; border-radius: 45rpx; padding-left:110rpx; color:#ffffff; background-image: url(/static/lianai.png); background-size: 50rpx; background-repeat: no-repeat; background-position: 50rpx center;}
			.btn1:active,.btn2:active{opacity: 0.6;}
			.cancel{width:250rpx; background-color: #c5c3c4; color:#fcfcfc; padding-left:95rpx; background-position: 35rpx center;}
		}
	}
</style>
